import RouterLink from "./components/router-link";
import routerView from "./components/router-view";

export let Vue;

function install(_Vue) {
  // 将传入Vue 的构造函数变成全局的
  Vue = _Vue;

  Vue.mixin({
    beforeCreate() {
      // 组件渲染时是从父到子的，通过根实例向下传递router
      if (this.$options.router) {
        this._routerRoot = this; // 指向根实例
        this._router = this.$options.router;

        // 路由初始化，this 指向的就是我们的整个应用，this._router 指向路由实例
        this._router.init(this);

        // 给根实例上添加一个属性，_route 就是当前的current 对象，表示当前的路由信息，
        // 同时将路this._route 转化为响应式数据，路由路径改变时进行响应式更新视图
        // this._route = this._router.history.current 没有响应式
        Vue.util.defineReactive(this, "_route", this._router.history.current);
      } else {
        // 在所有组件上都增加一个_routerRoot 指向根实例，向父组件往上获取
        this._routerRoot = this.$parent && this.$parent._routerRoot;
      }
    }
  })

  Object.defineProperty(Vue.prototype, "$router", {
    get() {
      // 代理$router 指向根实例上的_router（即Vue.$options.router）
      return this._routerRoot && this._routerRoot._router;
    }
  })

  Object.defineProperty(Vue.prototype, "$route", {
    get() {
      // 代理$route 指向根实例上的_route（即当前路由的current 对象）
      return this._routerRoot && this._routerRoot._route;
    }
  })

  // 注册组件router-link、router-view
  Vue.component("router-link", RouterLink);
  Vue.component("router-view", routerView);
}

export default install
